<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>来访接待</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/assets/css/elementui.css">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=317"/>
    <link rel="stylesheet" href="css/apply.css">
    <style>
        [v-cloak] {
            display: none;
        }

        .myInput {
            width: 100%;
            height: 100%;
            border: none;
            float: left;
            zoom: 1;
            outline: medium;
        }

        .myInput1 {
            width: 40px;
            border: none;
            zoom: 1;
            outline: medium;
        }

        .btn {
            margin: 0 auto;
            width: 80%;
        }

        .el-radio {
            margin-right: 4px;
        }

        .table {
            border: 1px solid #232323;
            width: 80%;
            margin: 0;
            padding: 0;
            border-collapse: collapse;
            border-spacing: 0;
            margin: 0 auto;
        }

        table tr {
            border: 1px solid #232323;
            padding: 5px;
        }

        table th, table td {
            padding: 10px;
            text-align: center;
        }

        @media screen and (max-width: 600px) {
            table {
                border: 0;
            }

            table thead {
                display: none;
            }

            table tr {
                margin-bottom: 10px;
                display: block;
                border-bottom: 2px solid #ddd;
            }

            table td {
                display: block;
                text-align: right;
                font-size: 26px !important;
                border-bottom: 1px dotted #ccc;
            }

            table td:last-child {
                border-bottom: 0;
            }

            table td:before {
                content: attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }
        }

        .note {
            max-width: 80%;
            margin: 0 auto;
        }

        .input-line {
            font-family: Tahoma, Arial, 宋体;

            font-size: 16px;
            line-height: 16px;
            border-top-style: none;

            border-right-style: none;

            border-left-style: none;

            border-bottom-color: #00000045;

            border-top-width: 0px;

            border-right-width: 0px;

            border-bottom-width: 1px;

            border-left-width: 0px;
            width: 80%;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="container">
    <div id="fm">
        <form>
            <table class="table" style="width:100%;height:100%;border:1px solid;align:center;font-size:12px;" border
                   cellspacing="0" cellpadding="0">
                <caption style="font-size:24px;font-weight:bold;">访客接待
                    <a size="mini" style="position: absolute;top:2em;right: 4em" @click="handlePrint()">
                        <i class="el-icon-printer"></i>
                    </a>
                </caption>

                <tr align="center">
                    <td>来访事由</td>
                    <td colspan="4">
                        <el-input v-model="form.reason"></el-input>
                    </td>
                    <td>来访日期</td>
                    <td>
                        <el-input v-model="form.visitDate"></el-input>
                    </td>
                </tr>
                <tr align="center">
                    <td>对接负责人</td>
                    <td colspan="4">
                        <el-input v-model="form.treatName"></el-input>
                    </td>
                    <td>负责人电话</td>
                    <td>
                        <el-input v-model="form.treatPhone"></el-input>
                    </td>
                </tr>
                <tr align="center">
                    <td>出席接待领导</td>
                    <td colspan="6">
                        <el-input type="textarea" v-model="form.joinList"></el-input>
                    </td>

                </tr>
                <tr align="center">
                    <td>来宾名单</br>及职务</td>
                    <td colspan="4">
                        <el-input type="textarea" v-model="form.visitList"></el-input>
                    </td>
                    <td>来宾联系电话</td>
                    <td>
                        <el-input v-model="form.visitPhone"></el-input>
                    </td>
                </tr>
                <tr align="center">
                    <td>准备项目</td>
                    <td colspan="8" style="text-align: left">
                        <el-row>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.xcws"/>现场卫生
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.baojie"/>办公楼保洁
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.chashui"/>茶水
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.anquanmao"/>安全帽
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.cheliang"/>车辆安排
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.tyts"/>投影调试
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.sysx"/>摄影摄像
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.shuiguo"/>水果
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.xiangyan"/>香烟
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.chuyou"/> 出游
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.huanyingci"/>会议室欢迎词
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.kuoyinqi"/>扩音器
                            </el-col>
                            <el-col :span="4">
                                <input type="checkbox" v-model="form.zhanting"/>展厅
                            </el-col>
                            <el-col :span="12">
                                展厅使用时间&nbsp;&nbsp;&nbsp;&nbsp;<input class="input-line" v-model="form.useTime">
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <input type="checkbox" v-model="form.dianziping"/>电子大屏（内容）：
                                &nbsp;&nbsp;&nbsp;&nbsp;<input class="input-line" v-model="form.dzdp">
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.checkLp"/>礼品
                                （标准： <input class="input-line" v-model="form.lipin" style="width: 60%"> 元/人）
                            </el-col>

                        </el-row>
                        <el-row>
                            注：台签原则上请到综合部领取模板自行打印
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.checkcyzb"/>餐饮准备：
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                1、午餐（
                                <input type="checkbox" v-model="form.checkstjc"/>食堂就餐
                                <input type="checkbox" v-model="form.checkwcjc"/>外出就餐
                                ）
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.checkShitang"/>食堂就餐
                                &nbsp;&nbsp;人数（含陪同人员）：<input class="input-line"
                                                             v-model="form.eatCount"
                                                             style="width: 5em">
                            </el-col>
                            <el-col :span="12">
                                就餐标准：
                                <input type="checkbox" v-model="form.checkSingle"/> 单独就餐
                                <input type="checkbox" v-model="form.checkMulti"/> 与领导一起就餐
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                饮食禁忌：<input class="input-line" v-model="form.jinji">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.checkout"/>外出就餐
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="20">
                                就餐地点：<input class="input-line" v-model="form.eatPlace" style="width: 10em">
                                人数（含陪同人员）：<input class="input-line" v-model="form.eatCount1" style="width: 5em">
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                2、晚餐（
                                <input type="checkbox" v-model="form.tangshi"/>  食堂就餐：
                                <input type="checkbox" v-model="form.outeat"/>  外出就餐：
                                ）
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.outeatshitang"/>  食堂就餐人数（含陪同人员）：
                                <input class="input-line" v-model="form.outeatCount" style="width: 5em">
                            </el-col>
                            <el-col :span="12">
                                就餐标准：
                                <input type="checkbox" v-model="form.waancanSingle"/>单独就餐
                                <input type="checkbox" v-model="form.wancanMulti"/> 与领导一起就餐
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                饮食禁忌：<input class="input-line" v-model="form.jinji">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.waancanout"/>外出就餐
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="20">
                                就餐地点：<input v-model="form.wancanPlace" class="input-line" style="width: 10em">
                                人数（含陪同人员）：<input class="input-line" v-model="form.wancanCount" style="width: 5em">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <input type="checkbox" v-model="form.checkLiusu"/> 留宿&nbsp;&nbsp;&nbsp;&nbsp;
                                地点：<input class="input-line" v-model="form.liusuPlace" style="width: 70%"/>
                            </el-col>
                            <el-col :span="12">
                                （要求：
                                <input name="yaoqiu" type="radio" v-model="form.danjian" />单间
                                <input name="yaoqiu" type="radio" v-model="form.biaozhun" />标间
                                <input name="yaoqiu" type="radio" v-model="form.taofang" />套房&nbsp;&nbsp;&nbsp;&nbsp;
                                结算方式：
                                <input name="结算" type="radio" v-model="form.zifu" />自付
                                <input name="结算" type="radio" v-model="form.guazhang" />挂账
                                ）
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="20">
                                房间数量：<input class="input-line" v-model="form.roomCount" style="width: 20em">
                            </el-col>
                        </el-row>

                    </td>
                </tr>
                <tr align="center">
                    <td>行程安排</td>
                    <td colspan="6">
                        <table style="width:100%;height:100%;border:1px solid;align:center;font-size:12px;" border
                               cellspacing="0" cellpadding="0" class="table">
                            <tr>
                                <th>日期</th>
                                <th>时间</th>
                                <th>内容</th>
                                <th>地点</th>
                                <th>备注</th>
                            </tr>
                            <tr v-for="(item,i) in form.tableData2" :key="i">
                                <td>
                                    <el-input v-model="item.date"></el-input>
                                </td>
                                <td>
                                    <el-input v-model="item.time"></el-input>
                                </td>
                                <td>
                                    <el-input v-model="item.detail"></el-input>
                                </td>
                                <td>
                                    <el-input v-model="item.place"></el-input>
                                </td>
                                <td>
                                    <el-input v-model="item.comment"></el-input>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr align="center">
                    <td>备注</td>
                    <td colspan="6" style="text-align: left">
                        <el-row>1、此表因漏填造成的接待失误由申请单位自行承担责任；</el-row>
                        <el-row>2、请将此表交于综合部，并确认接收；</el-row>
                        <el-row>3、如果分管副总不在，请电话联系确认后交于综合部。</el-row>
                    </td>
                </tr>
            </table>
            <el-button type="primary" @click="save" style="margin-left: 50%" v-if="instanceId==''">保存</el-button>

        </form>

    </div>

    <el-table
            v-if="instanceId"
            :data="tableData"
            border
            style="margin-top: 1em;">
        <el-table-column
                prop="stepId"
                label="审批顺序"
                width="80">
        </el-table-column>
        <el-table-column
                prop="orgname"
                label="组织"
                width="200">
        </el-table-column>
        <el-table-column
                prop="nickName"
                label="姓名"
                width="200">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                width="80">
            <template slot-scope="scope">
                <span>{{handleStatus(scope.row)}}</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="action"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button v-if="(getUserId()==scope.row.person)&&(scope.row.status==2)&&(scope.row.makeFlag!=2)"
                           type="primary" size="mini"
                           @click="handleAction(scope.row)">审核
                </el-button>
                <el-button
                        v-else-if="(getUserId()==scope.row.person)&&(scope.row.status==2)&&(scope.row.makeFlag==2)"
                        type="primary" size="mini"
                        @click="handleAction(scope.row)">执行
                </el-button>
            </template>
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="审批时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="comment"
                label="备注"
                width="200">
        </el-table-column>
    </el-table>

</div>
<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/assets/js/common.js?v=317"></script>
<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="/assets/js/sqjx.js"></script>
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/elementui.js"></script>
<script type="text/javascript" src="js/design2.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script type="text/javascript" src="../../../assets/js/print.min.js"></script>
<script>

    function submitForm(param) {
        createFlow2Approve(param);
    }

    let that;
    new Vue({
        el: '#container',
        data: function () {
            return {
                templateId: '1579994698971598849',
                content: 'apply/welcome',
                instanceId: '',
                checkedCount: 0,
                tableData: [],
                form: {
                    userName: '',
                    department: '',
                    num: '',
                    name: '',
                    type: '',
                    firstUseTime: '',
                    oriMoney: '',
                    discountMoney: '',
                    money: '',
                    tableData2: [
                        {}, {}, {}, {}
                    ]
                },
                computerList: [],
                computerInfo: {},
                flowNodes: [],

            }
        },
        mounted: function () {
            that = this;
            that.getFlowApproveUserList();
            window.doSubmitForm = this.submitForm
            var instanceId = getUrlParam();
            this.instanceId = instanceId;
            if (instanceId) {
                //审批进入
                that.tableData = getProcessData(instanceId);
                // //查询流程详情
                $.post('/office/flowStepInstance/queryDetail', {id: instanceId}, function (res) {
                    if (res.code == 200) {
                        that.form = res.obj;
                        that.form.tableData2=JSON.parse(res.obj.tableData2)
                        $("#crtDate").text(formatDate(new Date(res.obj.crtDate)));
                    }
                });
            } else {
                //新建流程
                drawAdd();
                var html = ' <button onclick="addExecute()">添加执行人</button>';
                $(html).appendTo("#designButtonList");
                var today = formatDate(new Date())
                $("#crtDate").text(today);
                this.form.userName = getUserName()
                this.form.department = getOrgName();
            }

        },
        methods: {
            handlePrint() {
                printJS({
                    printable: 'fm',// // 文档来源：pdf或图像的url，html元素的id或json数据的对象
                    type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
                    targetStyles: ['*'],// 库在打印HTML元素时处理任何样式
                    css: '../../assets/css/elementui.css',
                    headerStyle: 'text-align: center;',
                    // style:
                    //     '  .el-row .el-form-item {\n' +
                    //     '            margin-bottom: 0px;\n' +
                    //     '            text-align: center;\n' +
                    //     '        }\n' +
                    //     '\n' +
                    //     '        .el-row .el-col {\n' +
                    //     '            border-right: 1px solid black;\n' +
                    //     '        }\n' +
                    //     '\n' +
                    //     '        .el-row {\n' +
                    //     '            border: 1px solid black;\n' +
                    //     '            margin-bottom: -1px !important;\n' +
                    //     '        }\n' +
                    //     '        .el-input input{\n' +
                    //     '            padding:0px;\n' +
                    //     '        }\n' +
                    //     '        .el-input .el-input__inner{\n' +
                    //     '            padding: 0px;\n' +
                    //     '        }'
                })

            },
            getUserId() {
                return getUserId();
            },
            handleAction(row) {
                openApprove(row.templateId, row.person, row.makeFlag)
            },
            handleChange(row) {
                that.computerInfo = that.computerList.find(x => x.编号 == row);
                that.form.onUseName = that.computerInfo.责任人
            },
            handleStatus(row) {
                return getStatus(row);
            },
            getFlowApproveUserList() {
                $.get('/office/user/getUserMainOrg', {account: getAccount()}, function (res) {
                    var orgId = res.obj.orgId;
                    var param1 = {templateId: that.templateId, dynamicOrgId: orgId};
                    $.get('/office/flowWorkTemplate/getFlowApproveUserList', param1, function (res) {
                        let a = res.obj.map(item => {
                            return {orgId: item}
                        })
                        that.flowNodes = a;
                        drawFlowStep(a);
                    })
                })

            },
            save() {
                that.submitForm();
            },
            submitForm() {
                that.$confirm('确认提交?').then(res => {
                    var params = {};
                    params.userId = localStorage.getItem("userId");
                    params.userName = getUserName();
                    params.department = getOrgName();
                    params.title ='访客接待';
                    params.reason = that.form.reason
                    params.content = that.content;
                    params.tableData2=that.tableData2
                    params.templateId = that.templateId
                    params.businessStr = JSON.stringify(that.form);
                    params.approveNodes = JSON.stringify(that.flowNodes)
                    submitForm(params);
                })
            },
        },

    })
</script>
</body>
</html>
